<template>
  <div class="index-aside">
    <div class="index-aside-collapse"></div>
    <div class="index-aside-item-container" style="background-color:var(--xz-bg-color)">
      <div class="index-aside-item index-aside-item-logo">
        <guardCatLogo></guardCatLogo>
        <el-divider style="margin: 0;" />
      </div>
      <div class="index-aside-item index-aside-item-menu ">
        <indexMenu></indexMenu>
      </div>
      <div class="index-aside-item index-aside-item-setting">
        <el-divider style="margin: 0;" />
        <indexUser></indexUser>
        <el-divider style="margin: 0;" />
        <indexSetting></indexSetting>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import indexMenu from './IndexMenu.vue';
import indexUser from './IndexUser.vue';
import indexSetting from './IndexSetting.vue';
import guardCatLogo from '@/components/GuardCatLogo.vue';
</script>

<style scoped lang="scss">
$height-logo: 71px;
$height-setting: 127px;
$height-menu: calc(100% - #{$height-setting} - #{$height-logo});

.index-aside {
  @include box(100%, 100%);
  padding: 20px;
  padding-right: 0;
  position: relative;

  .index-aside-collapse {
    position: absolute;
    top: 50%;
  }

  .index-aside-item-container {
    @include flex(column, space-between, center);
    @include box(100%, 100%);
    border-radius: 15px;
    z-index: 10000;
    // box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
  }

  .index-aside-item {
    width: 100%;
    overflow: hidden;
    background-color: initial;
  }

  .index-aside-item-logo {
    height: $height-logo;
    min-height: $height-logo;
    max-height: $height-logo;
  }

  .index-aside-item-menu {
    height: $height-menu;
    min-height: $height-menu;
    max-height: $height-menu;
  }

  .index-aside-item-setting {
    height: $height-setting;
    min-height: $height-setting;
    max-height: $height-setting;
  }

}
</style>